<template>
	<div>
		<!--		查询-->
		<el-row>
			<el-col :span="24">
				<el-form :inline="true" label-width="auto" :model="state.query">
					<el-form-item label="章节">
						<el-input v-model="state.query.name"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="init">查找</el-button>
					</el-form-item>
				</el-form>
			</el-col>
		</el-row>
		<!--		按钮-->
		<el-row>
			<el-col :span="24">
				<el-button type="primary" :icon="Edit" @click="btn('新增', {})"
					>新增</el-button
				>
			</el-col>
		</el-row>
		<!--		表单-->
		<el-row>
			<el-col :span="24">
				<el-table :data="state.itemList" stripe>
					<el-table-column align="center" prop="id" label="编号"  />
					<el-table-column align="center" prop="title" label="动漫名称"  />
					<el-table-column align="center" prop="name" label="章节名称" />
					<el-table-column align="center" prop="img" label="章节图片">
						<template #default="scope">

							<el-image
								style="width: 80px; height: 80px"
								:src="scope.row.img"
							/>
						</template>
					</el-table-column>
					<el-table-column align="center" prop="sort" label="排序" />
					<el-table-column
						align="center"
						fixed="right"
						label="操作"
						min-width="120"
					>
						<template #default="scope">
<!--							<el-button-->
<!--								link-->
<!--								type="primary"-->
<!--								size="small"-->
<!--								@click.prevent="btn('修改', scope.row)"-->
<!--								>修改-->
<!--							</el-button>-->
							<el-button
								link
								type="primary"
								size="small"
								@click.prevent="del(scope.row.id)"
								>删除</el-button
							>
						</template>
					</el-table-column>
				</el-table>
				<div class="page">
					<el-pagination
						background
						layout="prev, pager, next"
						:total="state.query.total"
						@current-change="sendValue"
					/>
				</div>
			</el-col>
		</el-row>
	</div>
	<el-dialog
		v-model="state.dialogVisible"
		:title="state.title"
		width="50%"
		:close-on-click-modal="false"
		:close-on-press-escape="false"
	>
		<el-form
			ref="ruleFormRef"
			:rules="rules"
			:model="state.from"
			label-width="auto"
			style="max-width: 600px"
		>
			<el-form-item label="动漫名称" prop="itemId">
				<el-select
					v-model="state.from.itemId"
					filterable
					placeholder="请选择"
					style="width: 240px"
				>
					<el-option
						v-for="item in state.domanList"
						:key="item.id"
						:label="item.title"
						:value="item.id"
					/>
				</el-select>
			</el-form-item>
			<el-form-item label="章节名称" prop="name">
				<el-input v-model="state.from.name" />
			</el-form-item>
			<el-form-item label="章节号" prop="chapter">
				<el-input-number v-model="state.from.chapter" :min="1" :max="10" />
			</el-form-item>

			<el-form-item label="章节图片" prop="img">
				<span style="color: red">
					请按照章节序号排列！
				</span>
				<el-upload
					v-model:file-list="fileList"
					action="http://ordinary.jimostudio.link:26451/api/upload?type=10&projectName=anime"
					list-type="picture-card"
					:on-success="handleAvatarSuccess"
				>
					<el-icon><Plus /></el-icon>
				</el-upload>

<!--				<el-dialog v-model="dialogVisible">-->
<!--					<img w-full :src="dialogImageUrl" alt="Preview Image" />-->
<!--				</el-dialog>-->
			</el-form-item>


		</el-form>
		<template #footer>
			<div class="dialog-footer">
				<el-button v-if="state.title === '修改'" @click="update(ruleFormRef)"
					>确定 修改</el-button>
				<el-button v-else @click="save(ruleFormRef)">确定 新增</el-button>
			</div>
		</template>
	</el-dialog>

	<el-dialog v-model="state.infoDialogVisible" title="详情" width="30%">
		<span v-html="state.info"></span>
		<template #footer>
			<span class="dialog-footer">
				<el-button type="primary" @click="state.infoDialogVisible = false"
					>关闭</el-button
				>
			</span>
		</template>
	</el-dialog>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import type { UploadProps, UploadUserFile } from 'element-plus'
const ruleFormRef = ref<FormInstance>()
import type { FormInstance } from 'element-plus'
import { Edit } from '@element-plus/icons-vue'
const rules = reactive({
	name: [
		{
			required: true,
			message: '章节名称不能为空',
			trigger: 'change',
		},
	],itemId: [
		{
			required: true,
			message: '动漫不能为空',
			trigger: 'change',
		},
	],
	chapter: [
		{
			required: true,
			message: '章节号码不能为空',
			trigger: 'change',
		},
	],
})
const state = reactive({
	domanList:[],
	info: '',
	imgPath: '',
	dialogVisible: false,
	infoDialogVisible: false,
	title: '',
	//条件查询
	query: {
		name: '',
		page: 1,
		limit: 10,
		total: 0,
	},
	itemList: [],
	from: {
		chapter:1,
		imgList:[]
	},
})

const fileList = ref<UploadUserFile[]>([])

/**
 * 文件上传
 * @param response
 * @param uploadFile
 */
const handleAvatarSuccess: UploadProps['onSuccess'] = (response) => {
	state.from.imgList.push(response.data.path)
	toast.success("上传成功！")
}
// /
function btn(type: string, data: any) {
	state.dialogVisible = true
	state.title = type
	if (type === '修改') {
		state.from.id = data.id
		state.from.title = data.title
		state.from.synopsis = data.synopsis
		state.from.img = data.img
		state.from.info = data.info
		console.log(state.from)
	}
}
/**
 * 查看详情
 */
function btnInfo(info: string) {
	state.info = info
	state.infoDialogVisible = true
}

function init() {

	http.get(`/chapter/page`,{
		params: state.query})
		.then((res) => {
			state.itemList = res.data.list
			state.query.total = res.data.total
		})
	http.get(`/item/page`,{
		params: {
			page: 1,
			limit: 99999999,

		}})
		.then((res) => {
			state.domanList = res.data.list
			console.log(res.data.list)
		})


}

//分页
/**
 * 分页出发函数
 * @param val
 */
const sendValue = (val: number) => {
	state.query.page = val
	init()
}

//修改
const update = async (formEl: FormInstance | undefined) => {
	if (!formEl) return
	await formEl.validate((valid) => {
		if (valid) {

			http.put('artcle/update', state.from).then(() => {
				toast.success('修改成功')
				state.dialogVisible = false
				state.from = {}
				init()
			})
		}
	})
}

//新增
const save = async (formEl: FormInstance | undefined) => {
	if (!formEl) return
	await formEl.validate((valid) => {
		if (valid) {
			http.post('/chapter/save', state.from).then(() => {
				toast.success('新增成功')
				state.dialogVisible = false
				init()
			})
		}
	})
}

//删除
function del(id: number) {
	http.delete(`chapter/${id}`).then(() => {
		toast.success('删除成功')
		init()
	})
}

init()
</script>

<style scoped>
.page {
	margin: 20px 0;
	display: flex;
	justify-content: center;
	text-align: center;
}

:deep(.avatar-uploader .el-upload) {
	border: 1px dashed var(--el-border-color);
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: var(--el-transition-duration-fast);
}

:deep(.avatar-uploader .el-upload:hover) {
	border-color: var(--el-color-primary);
}

:deep(.el-icon.avatar-uploader-icon) {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	text-align: center;
}

.avatar {
	width: 178px;
	height: 178px;
}
</style>
<route lang="json">
{
	"meta": {
		"title": "后台",
		"layout": "admin"
	}
}
</route>
